<template>
	<view id="myView">
		<view>这是test组件{{ num }}</view>
		<view>这是父组件index传到子组件test的值{{ title }}</view>
		<button @click="senNum">传值给index父组件</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num: 3,
			intId: null
		};
	},
	// 接收父组件传递过来的值
	props: ['title'],
	methods: {
		senNum() {
			console.log('test组件中打印的传值到index父组件中');
			// 传值到index父组件中
			this.$emit('myEven', this.num);
		}
	},
	// beforeCreate在实例初始化之后被调用，但数据、方法等还未初始化，页面也还没有渲染
	beforeCreate() {
		console.log('实例已经开始初始化了');
		console.log('beforeCreate-->' + this.num);
	},
	// created在实例创建完成后被立即调用，同时数据、方法等也初始化了，页面也渲染了
	created() {
		// 一般初始化数据
		console.log('created-->' + this.num);
		// 定时器
		// this.intId = setInterval(() => {
		// 	console.log('执行定时器');
		// }, 1000);
	},
	// beforeMount在挂载开始之前被调用，但页面还没有渲染，获取不到DOM
	beforeMount() {
		// document.getElementById仅支持H5，小程序与APP不支持
		console.log('beforeMount-->' + document.getElementById('myView'));
	},
	// mounted挂载到实例上去之后调用，页面已被渲染，可以获取DOM
	mounted() {
		// 一般在里面操作DOM
		// document.getElementById仅支持H5，小程序与APP不支持
		console.log('mounted>' + document.getElementById('myView'));
	},
	// 实例销毁之前调用。在这一步，实例仍然完全可用
	beforeDestroy() {
		console.log('组件销毁之前');
	},
	// destroyed实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
	destroyed() {
		console.log('组件销毁了');
		clearInterval(this.intId); // 清除created里面创建的定时器
	}
};
</script>

<style></style>
